<template>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>

          <el-breadcrumb-item>添加口碑</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="text item">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>

          <el-form-item label="手机" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>

          <el-form-item label="报备时间" required>
            <el-date-picker
              v-model="ruleForm.inputtime"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd "
              value-format="yyyy-MM-dd "
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="口碑来源" prop="source">
            <el-select v-model="ruleForm.source" placeholder="请选择学生来源">
              <el-option label="网络" value="网络"></el-option>
              <el-option label="朋友" value="朋友"></el-option>
              <el-option label="学生" value="学生"></el-option>
              <el-option label="校招" value="校招"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注" prop="message">
            <el-input type="textarea" v-model="ruleForm.message"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >添加</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
  
  <script>
// 引入口碑接口
import request from "@/api/koubei.js";

export default {
  data() {
    return {
      ruleForm: {
        username: "",
        phone: "",
        source: "",
        message: "",
        inputtime: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]{2,5}$/,
            message: "长度在 2 到 5 个字符",
            trigger: "blur",
          },
        ],

        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern:
              /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        source: [
          {
            required: true,
            message: "请选择口碑来源",
            trigger: "change",
          },
        ],

        inputtime: [
          {
            type: "date",
            required: true,
            message: "请输入时间",
            trigger: "change",
          },
        ],

        message: [
          {
            required: true,
            message: "请填写备注",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    // 提交表单
    submitForm(formName) {
      // 调用表单对象接口方法 validate:验证表单的方法
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证通过 获取表单里面的数据 作为请求添加的参数 发送到服务器
          //1 获取数据
          console.log(this.ruleForm);
          request
            .addkb(this.ruleForm)
            .then(({ data }) => {
              console.log(data);
              if (data.code === 0) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                // 表单数据清空
                this.$refs[formName].resetFields();
                this.ruleForm.inputtime = null; //时间清空
              } else {
                // 添加失败
                this.$message({
                  message: "添加失败",
                  type: "error",
                });
              }
            })
            .catch((e) => {
              this.$message({
                message: "添加失败",
                type: "error",
              });
            });
        } else {
          // 验证不通过
          this.$message({
            message: "验证失败",
            type: "warring",
          });
          return false;
        }
      });
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
  
  <style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>